<template>
  <div>
    <BKImagePreviewer ref="imagePreviewer" />
    <div
      :class="['bk-layout-top-wrapper', theme.layoutClass]"
      v-if="!layoutVisible"
    >
      <div class="bk-layout-element">
        <BKLayoutHeader :has-operation="false">
          <span class="c-white">按 ESC 退出编辑模式</span>
        </BKLayoutHeader>
      </div>
    </div>
    <div
      v-if="includeMap && mapInited"
      class="map-box"
      :class="[
        theme.name.toLowerCase() + '-layout-mode',
        {
          'sidebar-collapsed': collapsed,
          'has-top-submenus': hasTopSubmenus,
          'layout-hidden': !layoutVisible
        }
      ]"
      v-show="mapVisible"
    >
      <BKGeoMap
        is-global
        ref="map"
      />
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { includeMap } from '@/configs'

export default {
  name: 'Attachment',
  data () {
    return {
      includeMap,
      mapInited: false
    }
  },
  computed: {
    ...mapState('map', ['popupImgList']),
    ...mapState('settings', ['layoutVisible', 'theme', 'collapsed', 'hasTopSubmenus']),
    mapVisible () {
      return ['/ysqjc/rainstorm/achievements', '/ysqjc/rainstorm/cxqtq'].includes(this.$route.path)
    }
  },
  watch: {
    // 延迟加载地图，防止打开页面进入的路由中，地图不可见导致地图位置初始化失败的问题
    mapVisible: {
      immediate: true,
      handler (v) {
        if (v) {
          this.mapInited = true
        }
      }
    }
  },
  methods: {
    handlePreviewImage (urls) {
      this.$refs.imagePreviewer.show(urls)
    },
    openPopupImgByIndex (index) {
      let list = []
      if (index === 0) {
        list = this.popupImgList
      } else {
        list = [this.popupImgList[index]]
        for (let i = index; i < this.popupImgList.length - 1; i++) {
          list.push(this.popupImgList[i])
        }
        for (let i = 0; i <= (this.popupImgList.length - index); i++) {
          list.push(this.popupImgList[i])
        }
      }
      this.$refs.imagePreviewer.show(list)
    },
    handleKeydown (e) {
      if (e.keyCode === 27 && this.$refs.map) {
        this.$refs.map.closeTool()
      }
    },
    calculateStation () {
      const data = JSON.parse(sessionStorage.getItem('stationInfo'))
      console.log(data)
      this.$root.$emit('getHtAndCvByPosition', { coordinate: [data.LGTD, data.LTTD], name: data.STNM + ' ' + data.STCD })
    }
  },
  created () {
    this.$root.$on('previewImage', this.handlePreviewImage)
    window.$attachment = this
    document.addEventListener('keydown', this.handleKeydown)
  },
  beforeDestroy () {
    document.removeEventListener('keydown', this.handleKeydown)
    this.$root.$off('previewImage', this.handlePreviewImage)
    window.$attachment = null
  }
}
</script>

<style lang="scss" scoped>
.map-box {
  position: absolute;
  top: $layoutHeaderHeight;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  transition: $baseTransition;

  &.common-layout-mode {
    left: $sidebarWidth;

    &.sidebar-collapsed {
      left: $sidebarCollapsedWidth;
    }

    &.layout-hidden {
      left: 0 !important;
    }
  }
}
</style>
